/* 导航 */
.header{
    height: 1.333333rem;/*高度100px*/
    /* background: rgb(212, 255, 248); */
    box-shadow: 0 1px 9px rgba(0,0,0,.1);
    padding: 0 .4rem;
    /* 弹性盒模型 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 固定定位 */
    position: fixed;
    top: 0;
    left: 0;
    /* 层级关系 */
    z-index: 9;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
}
.header .logo{
    font-family: '\6977\4F53';
    font-size: .4rem;
    letter-spacing: .133333rem;/*字体间隙*/
}
/* 汉堡包 */
.header .navList{
    width: .6rem;
    height: .5rem;
    /* background: red; */
    /* 弹性盒模型 */
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;/*设置多行元素在垂直方向的对其方式*/

    /*
        方案一：
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        方案二：
            1）父元素容器
                display: flex;
                flex-wrap: wrap;
                align-content: space-between;设置多行元素在垂直方向的对其方式
            2）子元素项目
                width: 100%;
    */
}
.header .navList span{
    display: block;
    width: 100%;
    height: .04rem;
    background: rgb(138, 134, 134);
}
/* 二级下拉列表 */
.header .slide_nav_list{
    position: absolute;
    top: 1.333333rem;
    left: 0;
    line-height: 1.333333rem;
    text-align: center;
    background: #fff;
    width: 100%;
    border-top: 1px solid #999;
    /* 初始化隐藏 */
    display: none;
    /* 层级关系 */
    z-index: 9;
}
.header .slide_nav_list li{
    border-bottom: 1px solid rgb(221, 218, 218);
}
.header .slide_nav_list li a{
    display: block;
    width: inherit;
    height: inherit;
    color: #333;
}
/* 整屏蒙版 */
.header+.mask{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.3);
    position: fixed;
    left: 0;
    top: 0;
    display: none;
    z-index: 2;
}


/* 中间搜索框 */
.header .search{
    flex-grow: 1;/*扩张因子*/
    margin: 0 .266667rem;
    height: .666667rem;
    border: 1px solid rgb(194, 192, 192);
    border-radius: .133333rem;
    /* 弹性盒模型 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    
}
.header .search img{
    margin: 0 .24rem;
}
.header .search input{
    flex-grow: 1;/*扩张因子--占据容器的多余空间*/
    height: inherit;
    border: none;
    margin-right: .133333rem;
}
/* 屏蔽石化效果的背景色 */
input:disabled{
    background: transparent;
}


/* 轮播图 */
.banner{
    height: 5.333333rem;
    border-bottom: 1px solid #999;
    margin-top: 1.333333rem;/*值为100px，刚好为脱离文档流的导航的高度*/
}
.banner .swiper-container,
.banner .swiper-container .swiper-wrapper,
.banner .swiper-container .swiper-wrapper .swiper-slide{
    width: inherit;
    height: inherit;
}

.banner img{
    width: 100%;
    height: 100%;
}
/* 轮播图焦点 */
.banner .swiper-pagination  .swiper-pagination-bullet{
    width: .266667rem;
    height: .266667rem;
}
.banner .swiper-pagination  .swiper-pagination-bullet.swiper-pagination-bullet-active{
    background: #fff;
}


/* 选项列表 */
.control_list{
    margin-top: .266667rem;
    height: 4rem;
    /* background: yellow; */
}
.control_list ul{
    width: inherit;
    height: inherit;
    display: flex;
    flex-wrap: wrap;
}
.control_list ul li{
    width: 20%;
    /* 项目也可以作为弹性盒模型容器 */
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.control_list div.iconfont{
    font-size: .8rem;
    width: 1.066667rem;
    height: 1.066667rem;
    /* background: red; */
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin-top: .133333rem;
}
.control_list ul li p{
    width: 100%;
    text-align: center;
}
.control_list ul li:nth-of-type(1) div.iconfont{background: #fd9d21;}
.control_list ul li:nth-of-type(2) div.iconfont{background: #ff6767;}
.control_list ul li:nth-of-type(3) div.iconfont{background: #8a90fa;}
.control_list ul li:nth-of-type(4) div.iconfont{background: #5de75d;}
.control_list ul li:nth-of-type(5) div.iconfont{background: #ecb041;}
.control_list ul li:nth-of-type(6) div.iconfont{background: #26e2e9;}
.control_list ul li:nth-of-type(7) div.iconfont{background: #eb70bc;}
.control_list ul li:nth-of-type(8) div.iconfont{background: #35e7d0;}
.control_list ul li:nth-of-type(9) div.iconfont{background: #f5863c;}
.control_list ul li:nth-of-type(10) div.iconfont{background: #fa2d2d;}

/* 同步课程 */
.sync_course{
    margin-top: .266667rem;
}
.sync_course .sync_course_top{
    /* width: 90%;
    margin: auto; */
    /* line-height: 3; */
    display: flex;
    justify-content: space-between;
}
.sync_course .sync_course_top span{
    border-left: .133333rem solid #74C6B3;
    padding-left: .106667rem;
    font-size: .4rem;
}
.sync_course .sync_course_top a{
    margin-right: .266667rem;
    color: #999;
}
.sync_course .sync_course_top a u{
    font-family: '宋体';
    text-decoration: none;
    margin-left: 4px;
}
/* 底部容器 */
.sync_course ul.sync_course_bottom{
    width: 90%;
    margin: auto;
}
.sync_course ul.sync_course_bottom li{
    height: 5.333333rem;
    background: rgb(241, 240, 240);
    margin:.266667rem auto;
}
/* 上 */
.course_top{
    height: 4rem;
    /* background: greenyellow; */
    /* 子绝父相 */
    position: relative;
}
.course_top img{
    width: 100%;
    height: inherit;
}
.course_top div:nth-of-type(1){
    position: absolute;
    left: 0;
    top: 0;
    padding: .266667rem .8rem;
    background: rgba(0,0,0,.3);
    color: #fff;
}
.course_top div:nth-of-type(2){
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: rgba(0,0,0,.3);
    color: #fff;
    padding: .266667rem 0;
    text-indent: .4rem;
}
/* 底部--左右布局---弹性盒模型 */
.course_bottom{
    height: 1.333333rem;
    padding: 0 .266667rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.course_bottom div p:nth-of-type(2){
    color: #999;
    margin-top: 10px;
} 
.course_bottom button{
    width: 2rem;
    height: .666667rem;
    background: #74C6B3;
    border: none;
    border-radius: .093333rem;
    color: #fff;
    outline: none;
    font-size: .266667rem;
}
/* 课程分类 */
.course_classify{
    width: 90%;
    height: auto;/*auto表示自动--默认值，由内容撑开*/
    margin: .266667rem auto;
}
.course_classify img{
    width: 100%;
    margin: .133333rem 0;
}
/* 网站底部导航 */
.footer{
    line-height: 2;
    text-align: center;
    margin: .4rem 0;
    color: #999;
}
.footer a{
    color: inherit;
    /* 子绝父相 */
    position: relative;
    font-size: 0.4rem;
}
/* 伪元素---效果等价于添加额外多余空标签元素---::after在元素之后插入内容、::before在元素之前插入内容 */
.footer a::before{
    content: '';
    width: 50%;
    height: 1px;
    background: #999;
    position: absolute;
    left: -53%;
    top: 50%;
}
.footer a::after{
    content: '';
    width: 50%;
    height: 1px;
    background: #999;
    position: absolute;
    right: -53%;
    top: 50%;
}

/* 
    自适应+机型监听---部分机型响应式开发 
    
    需求：在ipad机型下同步课程进行布局的局部微调，避免图片拉伸过大，影响用户体验
*/
@media only screen and (min-width: 768px){
    /* 设置单个li的宽度 */
    .sync_course ul.sync_course_bottom li{
        width: 48%;
    }
    /* 隐藏第三个课程li */
    .sync_course ul.sync_course_bottom li:nth-of-type(3){
        display: none;
    }
    /* ul容器 */
    .sync_course ul.sync_course_bottom{
        display: flex;
        justify-content: space-between;
    }
}
/* 返回顶部 */
.go_back{
    font-size: .533333rem;
    font-family: '楷体';
    width: 1rem;
    height: 1rem;
    /* 去除边框 */
    border: none;
    border-width: 0px;
    border-style: hidden;
    border-style: none;
    border-color: transparent;
    /* 去除外轮廓线 */
    outline: none;
    border-radius: 50%;
    /* 转换 */
    transform: rotate(90deg);
    color: #fff;
    background: rgb(180, 178, 178);
    /* 固定定位---相对于界面--右下角 */
    position: fixed;
    right: .4rem;
    bottom: 1.333333rem;
    /* 初始化隐藏 */
    display: none;
}